<template>
	<div>
		<el-row :span="24">
			<el-col :ms="24" :xs="0">
				<PcHedaer ref="pcHedaer"></PcHedaer>
				<div class="pc_con">
					<PcDrawer ref="pcDrawer" :navIndex="navIndex1" :navs="navs" :changeNav="changeNav1"></PcDrawer>
					<div class="pc_conbox">
						<div class="pc_conboxs">
							<div class="navbar">
								<div class="left" @click="back1">
									<i style="display: inline-flex; justify-content: center; align-items: center;">
										<svg viewBox="0 0 21.999 35.998" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
											<use xlink:href="/icons/icon.svg#comm_icon_fh--sprite"></use>
										</svg>
									</i>
									<span>{{$t('h_record.title1')}}</span>
								</div>
								<div class="center">
									<img style="transform: rotate(180deg);" src="../../assets/images/yh/jiantou.png" alt="">
									<div class="pc_title">{{$t('h_record.title3')}}</div>
									<img src="../../assets/images/yh/jiantou.png" alt="">
								</div>
								<div class="left" style="justify-content: flex-end;"></div>
							</div>
							<div class="conboxs">
								<div class="total_recharge">
									{{$t('h_record.title2')}}<span>￥{{allMoney}}</span>
								</div>
								
								<div class="record_item_box">
									<div class="record_item" v-for="(item,index) in lists" :key="index">
										<div class="record_left_box">
											<img :src="$F.getApiUrl()+item.icon" alt="">
											<div class="left_text_box">
												<div>
													<!-- {{item.paycate_name}} -->
												
													{{$t('l_chongzhi')}}</div>
												<div class="time">
													{{$t('h_record.title4')}}：{{item.order_no}}
												</div>
												<div class="time">
													{{$t('h_record.title5')}}：{{$F.date('Y-m-d H:i:s',item.create_time)}}
												</div>
											</div>
										</div>
										<div class="record_right_box">
											<div>￥{{item.money}}</div>
											<div class="status_sucess" v-if="item.status==1">{{ $t('l_shenhe')}}</div>
											<div class="status_fail" v-if="item.status==2">{{ $t('l_chenggong')}}</div>
											<div class="status_fail" v-if="item.status==0"></div>
											<div class="status_fail" v-if="item.status==3">{{ $t('l_jujue')}}</div>
										</div>
									</div>
									
									<span v-if="is_end" style="display: block;font-size: 14px;text-align: center;color: #989898;line-height: 16px;">{{$t('h_record.title11')}}</span>
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :ms="0" :xs="24">
				<div class="record pageContainer">
					<navHeader :title="$t('h_record.title3')"></navHeader>
					
					<div class="container scroll-container" @scroll="scroll">
						<div class="total_recharge">
							{{$t('h_record.title2')}}<span>￥{{allMoney}}</span>
						</div>
						
						<div class="record_item_box">
							<div class="record_item" v-for="(item,index) in lists" :key="index">
								<div class="record_left_box">
									<!-- <img :src="$F.getApiUrl()+item.icon" alt=""> -->
									<div class="left_text_box">
										<!-- item.paycate_name -->
										<div>{{$t('l_chongzhi')}}</div>
										<div class="time">
											{{$t('h_record.title4')}}：{{item.order_no}}
										</div>
										<div class="time">
											{{$t('h_record.title5')}}：{{$F.date('Y-m-d H:i:s',item.create_time)}}
										</div>
									</div>
								</div>
								<div class="record_right_box">
									<div>￥{{item.money}}</div>
									<div class="status_sucess" v-if="item.status==1">{{ $t('l_shenhe')}}</div>
											<div class="status_fail" v-if="item.status==2">{{ $t('l_chenggong')}}</div>
											<div class="status_fail" v-if="item.status==0"></div>
											<div class="status_fail" v-if="item.status==3">{{ $t('l_jujue')}}</div>
								</div>
							</div>
							
							<span v-if="this.is_end" style="display: block;font-size: .2rem;text-align: center;color: #989898;line-height: 1rem;">{{$t('h_record.title11')}}</span>
							
						</div>
					</div>
					
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import navHeader from '../../components/navHeader.vue'
	import PcHedaer from '../../components/pcheader.vue'
	import PcDrawer from '../../components/pcdrawer.vue'
	export default {
		components: {
			navHeader,
			PcHedaer,
			PcDrawer
		},
		data() {
			return {
				page:0,
				lists:[],
				allMoney:0,
				apisuo:false,
				is_end:false,
				
				navs: [{
						id: 0,
						name: this.$t('h_record.title23'),
						key: 'icon_game_menu_active_0',
					},
					{
						id: 2,
						name: this.$t('h_record.title24'),
						key: 'icon_game_menu_active_3',
					},
					{
						id: 7,
						name: this.$t('h_record.title25'),
						key: 'icon_game_menu_active_1',
					},
					{
						id: 6,
						name: this.$t('h_record.title26'),
						key: 'icon_game_menu_active_2',
					},
					{
						id: 1,
						name: this.$t('h_record.title27'),
						key: 'icon_game_menu_active_4',
					},
					{
						id: 4,
						name:this.$t('h_record.title28'),
						key: 'icon_game_menu_active_5',
					},
					{
						id: 3,
						name: this.$t('h_record.title29'),
						key: 'icon_game_menu_active_8',
					},
				
					{
						id: -2,
						name: this.$t('h_record.title30'),
						key: 'icon_game_menu_active_100',
					},
					// {
					// 	id: -3,
					// 	name: '收 藏',
					// 	key: 'icon_game_menu_active_101',
					// },
					{
						id: -4,
						name: this.$t('h_record.title31'),
						key: 'comm_icon_ss',
					},
				],
				navIndex1:0,
			}
		},
		created(){
			this.rechargeRecord()
		},
		methods:{
			back1(){
				this.$router.go(-1)
			},
			openMenus(){
				this.$refs.pcDrawer.openMenus()
			},
			closeMenus(){
				this.$refs.pcDrawer.closeMenus()
			},
			changeNav1(item) {
				this.$router.push('/')
			},
			scroll(e){
				console.log(e.target.scrollTop)
				let h = e.target.scrollHeight-e.target.clientHeight - 20
				console.log(h)
				if(e.target.scrollTop>=h){
					this.rechargeRecord()
				}
			},
			rechargeRecord(){
				if(this.apisuo){
					return;
				}
				if(this.is_end){
					return;
				}
				this.apisuo = true
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.page ++;
				this.$api.rechargeRecord({
					page:this.page
				}, (res) => {
					this.apisuo = false
					loading.close()
					if (res.code == 0) {
						if(res.data.list.length == 0){
							this.is_end = true
						}
						this.lists = this.lists.concat(res.data.list) 
						this.allMoney = res.data.allMoney
					} else {
						this.$message.error(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.record {
		width: 100vw;
		min-height: 100vh;
		background-color: var(--theme-bg-color);
		.total_recharge {
			font-size: .26rem;
			color: var(--theme-text-color-lighten);
			padding: 0.2rem;
			span {
				color: var(--theme-text-color);
				margin-left: 0.08rem;
			}
		}
		.record_item_box {
			padding: 0 0.2rem;
			.record_item {
				background-color: var(--theme-bg-color);
				padding: 0.2rem;
				border-radius: 0.1rem;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 0.2rem;
				.record_left_box {
					display: flex;
					align-items: center;
					img {
						border-radius: 0.1rem;
						height: 0.6rem;
						margin-right: 0.2rem;
						width: 0.6rem;
					}
					.left_text_box {
						color: var(--theme-text-color-darken);
						font-size: .24rem;
						font-weight: 300;
						.time {
							font-size: .22rem;
							color: var(--theme-text-color-lighten);
							margin-top: 0.03rem;
						}
					}
				}
				.record_right_box {
					font-size: .26rem;
					color: var(--theme-text-color-darken);
					font-weight: 300;
					.status_sucess {
						font-size: .22rem;
						color: var(--theme-secondary-color-success);
						margin-top: 0.03rem;
					}
					.status_fail {
						font-size: .22rem;
						color: red;
						margin-top: 0.03rem;
					}
					
				}
			}
		}
	}
	.pc_conboxs{
		.conboxs{
			width: 100%;
			height: auto;
			padding: 15px;
			background-color: var(--theme-top-nav-bg);;
			border-radius: 7px;
			margin-top: 15px;
		}
		.total_recharge {
			font-size: 14px;
			color: var(--theme-text-color-lighten);
			span {
				color: var(--theme-text-color);
				margin-left: 5px;
			}
		}
		.record_item_box {
			padding: 0;
			.record_item {
				background-color: transparent;
				padding: 15px;
				border-radius: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 15px;
				.record_left_box {
					display: flex;
					align-items: center;
					img {
						border-radius: 7px;
						height: 47px;
						margin-right: 15px;
						width: 47px;
					}
					.left_text_box {
						color: var(--theme-text-color-darken);
						font-size: 14px;
						font-weight: 300;
						.time {
							font-size: 12px;
							color: var(--theme-text-color-lighten);
							margin-top: 3px;
						}
					}
				}
				.record_right_box {
					font-size: 14px;
					color: var(--theme-text-color-darken);
					font-weight: 300;
					.status_sucess {
						font-size: 14px;
						color: var(--theme-secondary-color-success);
						margin-top: 3px;
					}
					.status_fail {
						font-size: 14px;
						color: red;
						margin-top: 3px;
					}
					
				}
			}
		}
	}
</style>